// 入口函数
$(function() {
    // 定义弹层对象；
    var layer = layui.layer;
    var form = layui.form;
    // 功能1. 友情链接列表
    getLinksList();

    function getLinksList() {
        // 发送ajax请求获取数据库信息
        $.ajax({
            type: 'GET',
            url: '/admin/links',
            /*    headers: {
                   Authorization: localStorage.getItem('token') || ''
               }, */
            success: function(res) {
                // 失败提示
                if (res.status !== 0) {
                    return $('tbody').html('暂无友情链接')
                }
                // 生成html字符串
                var htmlStr = template('tpl-links', res);
                // 添加到指定位置
                $('tbody').html(htmlStr)
            }
        })
    }
    var index1;
    // 功能2. 添加友情链接
    // 2.1. 点击弹出模态框
    $('#add-link').on('click', function() {
        // 弹出模态框
        index1 = layer.open({
            type: 1,
            area: ['800px', '450px'],
            title: '添加友情链接',
            content: $('#add-form-tpl').html(),
            btn: 0
        });
        imgURL = undefined

    })

    // 2.2. 利用事件委托触发file的点击事件
    $('body').on('click', '#urlIcon', function() {
        $('#linkFile').click();
    })

    // 2.3. 利用事件委托获取监听文件上传。同时预览头像
    var imgURL
    $('body').on('change', '#linkFile', function(e) {
        // 获取用户选择的文件
        var filelist = e.target.files
        if (filelist.length === 0) {
            return layer.msg('请选择照片！')
        }

        // 1. 拿到用户选择的文件
        file = e.target.files[0]

        // 2. 将文件，转化为路径
        imgURL = URL.createObjectURL(file)
            // 3. 重新初始化裁剪区域
        $('#preIcon').attr('src', imgURL)


    })

    // 2.4. 利用事件委托表单添加submit 提交事件
    $('body').on('submit', '#add-form', function(e) {

        // 阻止默认提交行为
        e.preventDefault();
        // 准备FromDate类型数据
        var fd = new FormData(this);
        if (imgURL == undefined) {
            return layer.msg('请选择链接图片！')
        } else {
            // 添加图片
            fd.append('linkicon', imgURL);
        }

        // 发送ajax
        $.ajax({
            type: 'POST',
            url: '/admin/links',
            data: fd,
            contentType: false,
            processData: false,
            success: function(res) {

                if (res.status !== 0) {
                    return layer.msg('添加友情链接失败')
                }
                layer.msg('添加友情链接成功', function() {

                    layer.close(index1); // 关闭模态框

                });

                getLinksList();
            }
        })


    })

    // 功能3. 删除友情链接
    // 利用事件委托给删除按钮添加点击事件
    $('body').on('click', '#del_btn', function() {
        // 获取id
        var id = $(this).attr('data-id');
        // console.log(id);
        layer.confirm('是否确认删除此链接?', { icon: 3, title: '提示' }, function(index) {
            // 发送ajax 请求
            $.ajax({
                    type: 'DELETE',
                    url: '/admin/links/' + id,
                    success: function(res) {
                        if (res.status !== 0) {
                            return layer.msg('删除失败')
                        }
                        layer.msg('删除成功')
                        getLinksList();
                    }
                })
                // 关闭
            layer.close(layer.index);
        });


        // console.log(123);
    })

    // 功能4. 编辑友情链接
    // 利用事件委托给查询按钮绑定点击事件
    // 4.1 通过事件委托弹出模态框
    var id
    var index2
    $('body').on('click', '#edit_btn', function() {
            // 弹出模态框
            index2 = layer.open({
                type: 1,
                area: ['700px', '450px'],
                title: '添加友情链接',
                content: $('#edit-form-tpl').html(),
                btn: 0
            });

            // 获取点击的id
            id = $(this).attr('data-id');
            $.ajax({
                type: 'GET',
                url: '/admin/links/' + id,
                success: function(res) {
                    if (res.status !== 0) {
                        return layer.msg('获取友情链接信息失败')
                    }
                    // console.log(res.data);
                    //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    form.val("editForm", {
                        linkname: res.data.linkname,
                        linkurl: res.data.linkurl,
                        linkdesc: res.data.linkdesc,
                    });

                    // console.log(res.data.linkicon);
                    $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon);
                }
            })
        })
        // ajax 请求
    $('body').on('submit', '#edit-form', function(e) {
        // 阻止默认行为
        e.preventDefault();
        // 准备FormDate 数据
        var fd = new FormData(this);
        if ($('#linkFile')[0].files.length === 1) {
            fd.append('linkicon', imgURL);
        }

        // 发送ajax请求
        $.ajax({
            type: 'PUT',
            url: '/admin/links/' + id,
            data: fd,
            // 必须添加以下两个配置项
            contentType: false,
            processData: false,
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg('更新链接失败')
                }
                layer.msg('更新链接成功');
                getLinksList();
            }
        })
        layer.close(index2); // 关闭模态框
    })
})